<template>
    <div >

        <Button type="primary" @click="querySellList">在售</Button>
        <Button type="primary" @click="getSoldList">已售</Button>
<!--        <Button type="primary" @click="getSoldList">关注</Button>-->
        <div v-if="showSellList">
            <Checkbox v-model:checked="startTimeChecked" @change="changeColumns">开售</Checkbox>
            <Checkbox v-model:checked="endTimeChecked" @change="changeColumns">结售</Checkbox>
            <Checkbox v-model:checked="roleChecked" @change="changeColumns">角色</Checkbox>
            <Table :columns="columns" :data-source="tableData" >

            </Table>
        </div>
        <div v-if="showSoldList">

            <Table :columns="soldColumns" :data-source="tableDataSold" >

            </Table>
        </div>

    </div>
</template>

<script>
    import client from "./request/axios-request";
    import {Button, Checkbox, Table} from "ant-design-vue";
    export default {
        name: "SellList",
        components:{Table, Checkbox, Button },




        mounted() {
            this.querySellList();
        },

        data() {
            return {
                listName:"sell",
                callback:'__xfe1',
                req_id:'',
                tableData: [],
                tableDataSold: [],
                startTimeChecked:  true,
                endTimeChecked: true,
                roleChecked: true,
                soldPage:1,
                activeKey: 1,
                showSellList:true,
                showSoldList:false,
                soldColumns:[
                    {
                        title: '外观',
                        dataIndex: 'info',
                        key: 'info',
                    }, {
                        title: '时间',
                        dataIndex: 'date',
                        key: 'date',
                    }, {
                        title: '价格',
                        dataIndex: 'price',
                        key: 'price',
                    },{
                        title: '角色',
                        dataIndex: 'role_name',
                        key: 'role_name',
                    },{
                        title: '服务器',
                        dataIndex: 'server_name',
                        key: 'server_name',
                    }
                ],
                columns:[{
                    title: '外观',
                    dataIndex: 'info',
                    key: 'info',
                },{
                    title: '单价',
                    dataIndex: 'price',
                    key: 'price',
                },{
                    title: '服务器',
                    dataIndex: 'server_name',
                    key: 'server_name',
                },{
                    title: '开售时间',
                    dataIndex: 'startTime',
                    key: 'startTime',
                },{
                    title: '结售时间',
                    dataIndex: 'endTime',
                    key: 'endTime',
                },{
                    title: '角色',
                    dataIndex: 'role_name',
                    key: 'role_name',
                }
                ]
            }
        },
        methods:{
            changeColumns(){
                console.log(this.startTimeChecked,this.endTimeChecked,this.roleChecked);
                const tempCol = [{
                    title: '外观',
                    dataIndex: 'info',
                    key: 'info',
                },{
                    title: '单价',
                    dataIndex: 'price',
                    key: 'price',
                },{
                    title: '服务器',
                    dataIndex: 'server_name',
                    key: 'server_name',
                }];
                this.startTimeChecked && tempCol.push({
                    title: '开售时间',
                    dataIndex: 'startTime',
                    key: 'startTime',
                });
                this.endTimeChecked && tempCol.push({
                    title: '结售时间',
                    dataIndex: 'endTime',
                    key: 'endTime',
                });
                this.roleChecked && tempCol.push({
                    title: '角色',
                    dataIndex: 'role_name',
                    key: 'role_name',
                });
                this.columns = tempCol;
            },

            querySellList(){
                this.showSoldList = false;
                this.showSellList = true;
                const url =
                    `https://trade-api.seasunwbl.com/api/seller/goods/consignment_list?req_id=11111&game_id=jx3&goods_type=3&__ts__=1723787047529&callback=${this.callback}`;

                client.request(url)
                    .then((res)=>{
                        const sellListStr = res.data.substring(this.callback.length+1,res.data.length - 2);
                        const sellList = JSON.parse(sellListStr);
                        console.log(sellList.data.list);
                        this.tableData = this.formatDataList(sellList.data.list);

                    })
                    .catch((err)=>{
                        console.log("errr",err);
                    })
            },
            formatDataList(rawData){
                const newList = [];
                for (let i = 0; i < rawData.length; i++){
                    let  tempObj = {};
                    const {info, single_unit_price, remaining_time,server_name,role_name, state, consignment_id, allow_update_price} = rawData[i];
                    const sellTime =parseInt(Date.now() + remaining_time*1000) ;
                    const remainingTime =  new Date(sellTime).toLocaleString().replace(/:\d{1,2}$/,'');
                    const price = single_unit_price/100;
                    tempObj =  {info, price, server_name, role_name, consignment_id, allow_update_price};
                    if (state === 3){//公示
                        tempObj["startTime"]= remainingTime.slice(5,17);
                        const endTime =parseInt(Date.now() + remaining_time*1000 + 10*24*60*60*1000) ;
                        tempObj["endTime"] = new Date(endTime).toLocaleString().replace(/:\d{1,2}$/, '').slice(5,17);;
                    }
                    if (state === 5){//在售
                        tempObj["endTime"]= remainingTime.slice(5,17);
                        tempObj["startTime"] = "-"
                    }
                    if (state === 1){//未上架
                        tempObj["endTime"]= "未上架";
                        tempObj["startTime"] = "未上架"
                    }

                    newList.push(tempObj);
                }
                console.log(newList);
                return newList;
            },
            handleClick(data){
                console.log(data);
                const urlChangePrice = `https://trade-api.seasunwbl.com/api/seller/goods/consignment_update_price?req_id=WG4bhM4k9UqRexmib112JXvCmRpgpf7h&game_id=jx3&single_unit_price=155100&goods_type=3&validate_type=2&consignment_id=${data.consignment_id}&second_password=c2ff872adce77b63db57c9ed2c5e59f2348f7363&__ts__=1723823193135&callback=__xfe13`;
                console.log(urlChangePrice);
                client.request(urlChangePrice)
                    .then((res)=>{
                        console.log('changePriceSuc',res);
                    })
                    .catch((err)=>{
                        console.log('urlChangePrice',err);
                    })
            },
            getSoldList(){
                this.showSoldList = true;
                this.showSellList = false;
                const urlSold =
                    `https://trade-api.seasunwbl.com/api/seller/order/list?req_id=EJKaLSJwtwRGB6ieLLmY0KeRWQquufid&game_id=jx3&page=${this.soldPage}&size=50&order_type=3&date_filter=5&__ts__=1725808103332&callback=${this.callback}`;

                client.request(urlSold)
                    .then((res)=>{

                        const sellListStr = res.data.substring(this.callback.length+1,res.data.length - 2);
                        const sellList = JSON.parse(sellListStr);
                        //state 9已到账 7已退款 2已关闭
                        const receivedList = sellList.data.list.filter((item)=> 9 === item.state);

                        this.tableDataSold = this.formatSoldDataList(receivedList);
                    })
                    .catch((err)=>{
                        console.log("errr",err);
                    })
            },
            formatSoldDataList(rawData){
                const newList = [];
                for (let i = 0; i < rawData.length; i++){
                    let  tempObj = {};
                    let {info, sold_profit, server_name,role_name,date} = rawData[i];
                    const price =sold_profit/100;
                    date = date.substring(0,16);
                    tempObj =  {info, price, server_name, role_name,date};
                    newList.push(tempObj);
                }
                return newList;
            }
        }
    }
</script>

<style scoped>
.test{
    height: 10rem;
    width: 10rem;
    background-color: aqua;
}
</style>